<template>
  <q-toolbar class="row no-wrap items-center">
    <q-tabs
      align="left"
      inline-label
      indicator-color="transparent"
      stretch
    >
      <q-route-tab
        :to="`/${protocol}/routers`"
        no-caps
        :label="`${protocolLabel} Routers`"
      >
        <q-badge
          v-if="routerTotal !== 0"
          align="middle"
          :label="routerTotal"
          class="q-ml-sm"
        />
      </q-route-tab>
      <q-route-tab
        :to="`/${protocol}/services`"
        no-caps
        :label="`${protocolLabel} Services`"
      >
        <q-badge
          v-if="servicesTotal !== 0"
          align="middle"
          :label="servicesTotal"
          class="q-ml-sm"
        />
      </q-route-tab>
      <q-route-tab
        v-if="protocol !== 'udp'"
        :to="`/${protocol}/middlewares`"
        no-caps
        :label="`${protocolLabel} Middlewares`"
      >
        <q-badge
          v-if="middlewaresTotal !== 0"
          align="middle"
          :label="middlewaresTotal"
          class="q-ml-sm"
        />
      </q-route-tab>
    </q-tabs>
  </q-toolbar>
</template>

<script>
import { defineComponent } from 'vue'
import { useStore, mapActions, mapGetters } from 'vuex'

export default defineComponent({
  name: 'ToolBar',
  data () {
    return {
      loadingOverview: true,
      intervalRefresh: null,
      intervalRefreshTime: 5000
    }
  },
  computed: {
    ...mapGetters('core', { overviewAll: 'allOverview' }),
    protocol () {
      return this.$route.meta.protocol
    },
    protocolLabel () {
      return this.protocol.toUpperCase()
    },
    routerTotal () {
      const data = this.overviewAll.items && this.overviewAll.items[`${this.protocol}`]
      return (data && data.routers && data.routers.total) || 0
    },
    servicesTotal () {
      const data = this.overviewAll.items && this.overviewAll.items[`${this.protocol}`]
      return (data && data.services && data.services.total) || 0
    },
    middlewaresTotal () {
      const data = this.overviewAll.items && this.overviewAll.items[`${this.protocol}`]
      return (data && data.middlewares && data.middlewares.total) || 0
    }
  },
  created () {
    this.refreshAll()
    this.intervalRefresh = setInterval(this.onGetAll, this.intervalRefreshTime)
  },
  beforeUnmount () {
    const $store = useStore()

    clearInterval(this.intervalRefresh)
    $store.commit('core/getOverviewClear')
  },
  methods: {
    ...mapActions('core', { getOverview: 'getOverview' }),
    refreshAll () {
      this.onGetAll()
    },
    onGetAll () {
      this.getOverview()
        .then(body => {
          console.log('Success -> toolbar/overview', body)
          if (!body) {
            this.loadingOverview = false
          }
        })
        .catch(error => {
          console.log('Error -> toolbar/overview', error)
        })
    }
  }
})
</script>

<style scoped lang="scss">
  @import "../../css/sass/variables";

  .q-toolbar {
    min-height: 48px;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .body--dark .q-toolbar {
    background-color: #0e204c;
  }

  .q-tabs {
    :deep(.q-tabs__content) {
      .q-tab__label {
        color: $app-text-grey;
        font-size: 16px;
        font-weight: 700;
      }
      .q-badge {
        font-size: 13px;
        font-weight: 700;
        border-radius: 12px;
        text-align: center;
        align-items: center;
        justify-content: center;
        min-width: 30px;
        padding: 6px;
        color: $app-text-grey;
        background-color: rgba( $app-text-grey, .1 );
      }
      .q-tab--active {
        .q-tab__label {
          color: $accent;
        }
        .q-badge {
          color: $accent;
          background-color: rgba( $accent, .1 );
        }
      }
    }
  }
</style>
